<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品查询汇总信息列表页</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <!-- 先引入css文件 放到自己css文件的上面 -->
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入图标 -->
    <link rel="stylesheet" href="./font/font_zuojiantou/iconfont.css">
    <link rel="stylesheet" href="./font/font_youjiantou/iconfont.css">
    <!-- 引入js文件 -->
    <script src="js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>

    <!-- 引入图标 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script type="text/javascript" src="js/laydate.js"></script>

</head>

<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="logo">
            <a href="#">
                <img src="./upload/logo.png" alt="">
            </a>
        </div>
        <p title="安徽农业大学食堂采购商品查询汇总信息">安徽农业大学食堂采购商品查询汇总信息 </p>
        <a href="#"><span class="pre">&#xe642;</span></a>
        <a href="#"><span class="next">&#xe61c;</span></a>

    </div>
    <!-- 扫码次数部分 -->
    <div class="numbers">
        <p>该页面扫码累计: <input type="text" value="12345" style="width: 2rem;color:rgb(107, 102, 102)">人次</p>
        <input class="laydate-icon" id="demo" value="请选择时间">
        <input type="submit" value="查询" class="header_search" />
    </div>
    <!-- 导航栏部分 -->
    <nav class="nav">
        <!-- 蔬菜区 -->
        <div class="nav_header">
            <p>今日溯源新鲜蔬菜类:</p>
            <!-- <span> <i class="fa fa-bell-o" style="font-size:.633333rem;color:red"></i>  <b>提示:</b>点击图片可查看商品详细溯源信息!</span> -->
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <a href="#" class="item">
            <img src="./images/dabaicai.jpg" alt="">
            <span>大白菜</span>
            <i>溯源详情</i>
        </a>
        <a href="info.html" class="item" target="blank">
            <img src="./images/kongxincai.jpg" alt="">
            <span>空心菜</span>
            <i>溯源详情</i>
        </a>


        <a href="#" class="item">
            <img src="./images/bocai.jpg" alt="">
            <span>菠菜</span>
            <i>溯源详情</i>
        </a>
        <a href="#" class="item">
            <img src="./images/douya.jpg" alt="">
            <span>豆芽</span>
            <i>溯源详情</i>
        </a>
        <a href="#" class="item">
            <img src="./images/xihongshi.jpg" alt="">
            <span>西红柿</span>
            <i>溯源详情</i>
        </a>
        <a href="#" class="item">
            <img src="./images/xilanhua.jpg" alt="">
            <span>西兰花</span>
            <i>溯源详情</i>
        </a>
        <!-- 畜禽类 -->
        <div class="nav_header">
            <p>今日溯源畜禽类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 蛋品豆面类 -->
        <div class="nav_header">
            <p>今日溯源蛋品豆面类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 冻品咸货类 -->
        <div class="nav_header">
            <p>今日溯源冻品咸货类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 米面粮油类 -->
        <div class="nav_header">
            <p>今日溯源米面粮油类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 时令水果类 -->
        <div class="nav_header">
            <p>今日溯源时令水果类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 水产海鲜类 -->
        <div class="nav_header">
            <p>今日溯源水产海鲜类:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
        <!-- 调料干货类 -->
        <div class="nav_header">
            <p>今日溯源调料干货类:</p>
        </div>
        <a href="" class="item" target="blank">
            <img src="./images/无图片商品.png" alt="">
            <span>酱油</span>
            <i>暂无溯源详情</i>
        </a>
        <!-- <a href="" class="item" target="blank">
            <img src="./images/暂无图片2.png" alt="">
            <span>酱油</span>
            <i>暂无溯源详情</i>
        </a>
        <a href="" class="item" target="blank">
            <img src="./images/暂无图片3.png" alt="">
            <span>酱油</span>
            <i>暂无溯源详情</i>
        </a> -->

        <!-- 其它类 -->
        <div class="nav_header">
            <p>今日其它溯源商品:</p>
        </div>
        <a href="info.html" class="item" target="blank">
            <img src="./images/baicai.jpg" alt="">
            <span>乌菜</span>
            <i>溯源详情</i>
        </a>

        <a href="#" class="item">
            <img src="./images/zibaocai.jpg" alt="">
            <span>紫包菜</span>
            <i>溯源详情</i>
        </a>
    </nav>
    <!-- 销售商信息部分 -->
    <div class="trader1">
        <p>供货商:<input type="text" value="安徽景徽菜篮子"></p>
        <p>责任人:<input type="text" value="***"></p>
        <p>电 话: <input type="text" value="123456789"></p>
        <p>出厂日期: <input type="text" value="2021-01-12"></p>
    </div>
    <div class="trader">
        <p>商家名称:<input type="text" value="百大合家福"></p>
        <p>责任人:<input type="text" value="***"></p>
        <p>电 话: <input type="text" value="123456789"></p>
        <p>地址: <input type="text" value="合肥市庐阳区长江西路199号"></p>
    </div>
    <!-- //分割部分 -->
    <div class="gap3">

    </div>
    <!-- 底部部分 -->
    <footer class="footer">
        @版权所有:安徽省北斗精准农业信息工程实验室
    </footer>

    <script type="text/javascript">
        ! function() {
            laydate.skin('dahong'); //切换皮肤，请查看skins下面皮肤库
            laydate({
                elem: '#demo'
            }); //绑定元素
        }();

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16', //最大日期
            istime: true,
            istoday: false,
            choose: function(datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
            min: laydate.now(),
            max: '2099-06-16',
            istime: true,
            istoday: false,
            choose: function(datas) {
                start.max = datas; //结束日选好后，充值开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);

        //自定义日期格式
        laydate({
            elem: '#test1',
            format: 'YYYY年MM月DD日',
            festival: true, //显示节日
            choose: function(datas) { //选择日期完毕的回调
                alert('得到：' + datas);
            }
        });

        //日期范围限定在昨天到明天
        laydate({
            elem: '#hello3',
            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        });
    </script>
</body>

</html>